<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getAdvertDetail } from '@/api/advert/admin'
import { ContentWrap } from '@/components/ContentWrap'
import type { AdvertItem } from '@/api/advert/types'

// 路由和路由参数
const route = useRoute()
const router = useRouter()

// 广告详情数据
const advertDetail = ref<Partial<AdvertItem>>({})
const contentData = ref({
  imageUrl: '',
  linkUrl: '',
  width: undefined as number | undefined,
  height: undefined as number | undefined,
  title: ''
})

// 加载状态
const loading = ref(false)

// 获取广告详情
const fetchAdvertDetail = async (id: string) => {
  try {
    loading.value = true
    const response = await getAdvertDetail(Number(id))
    if (response.code === 200) {
      advertDetail.value = response.data

      // 解析contentJson
      if (response.data.contentJson) {
        try {
          contentData.value = JSON.parse(response.data.contentJson)
        } catch (e) {
          console.error('解析contentJson失败', e)
        }
      }
    } else {
      ElMessage.error(response.message || '获取广告详情失败')
    }
  } catch (error) {
    ElMessage.error('获取广告详情失败')
  } finally {
    loading.value = false
  }
}

// 返回列表页
const goBack = () => {
  router.push({ name: 'AdvertPageList' })
}

// 初始化
onMounted(() => {
  const id = route.params.id as string
  if (id) {
    fetchAdvertDetail(id)
  }
})
</script>

<template>
  <ContentWrap title="广告详情" message="查看广告详细信息">
    <el-descriptions :column="1" border :loading="loading">
      <el-descriptions-item label="ID">{{ advertDetail.id }}</el-descriptions-item>
      <el-descriptions-item label="广告名称">{{ advertDetail.name }}</el-descriptions-item>
      <el-descriptions-item label="广告位ID">{{ advertDetail.positionId }}</el-descriptions-item>
      <el-descriptions-item label="开始时间">{{ advertDetail.startTime }}</el-descriptions-item>
      <el-descriptions-item label="结束时间">{{ advertDetail.endTime }}</el-descriptions-item>
      <el-descriptions-item label="排序">{{ advertDetail.sort }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="advertDetail.status === 1 ? 'success' : 'danger'">
          {{ advertDetail.status === 1 ? '启用' : '禁用' }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="备注">{{ advertDetail.remark }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ advertDetail.createdAt }}</el-descriptions-item>
      <el-descriptions-item label="更新时间">{{ advertDetail.updatedAt }}</el-descriptions-item>

      <el-descriptions-item label="广告内容">
        <el-card shadow="never">
          <div v-if="contentData.imageUrl" style="margin-bottom: 15px">
            <div>图片:</div>
            <img :src="contentData.imageUrl" style="max-width: 200px; max-height: 200px" />
          </div>

          <div v-if="contentData.linkUrl" style="margin-bottom: 10px">
            <div>跳转链接: {{ contentData.linkUrl }}</div>
          </div>

          <div v-if="contentData.width || contentData.height" style="margin-bottom: 10px">
            <div>尺寸: {{ contentData.width }} x {{ contentData.height }}</div>
          </div>

          <div v-if="contentData.title">
            <div>标题: {{ contentData.title }}</div>
          </div>
        </el-card>
      </el-descriptions-item>
    </el-descriptions>

    <div style="margin-top: 20px">
      <el-button @click="goBack">返回</el-button>
    </div>
  </ContentWrap>
</template>

<style scoped>
:deep(.el-descriptions__label) {
  width: 150px !important;
}
</style>
